<template>
	<view>
		<view class="Wrapper">
			<view class="row j-end a-center">
				<view class="d-flex">
					<view class="Btn btnLine" @click="$pop.toHref()">购买套餐</view>
					<view class="Btn" @click="show = true">兑换仓单</view>
				</view>
			</view>
			<view class="foundation">
				<text class="size28 white">分红基金</text>
				<text class="size46 white">{{ accountInfo.dividend }}</text>
			</view>
			<view class="row j-sb a-center">
				<text class="infoTxt">绿色积分:{{ accountInfo.green_fen }}</text>
				<text class="infoTxt">余额:{{ accountInfo.money }}</text>
				<text class="infoTxt">积分:{{ accountInfo.jifen_yue }}</text>
			</view>
		</view>

		<view class="list" v-for="(item, index) in pageData" :key="index">
			<text class="list_txt">绿色积分：-{{ item.green_fen }}</text>
			<view class="d-flex a-center m-top10">
				<text class="color_33 size28">兑换积分：+{{ item.money }}</text>
				<text class="color_33 size28 p-left20">消费积分：+{{ item.jifen }}</text>
			</view>
			<text class="color_33 size28 m-top10">{{ item.add_time }}</text>
			<view class="Tips" :class="[getClassbg(item.channel)]" v-if="item.channel >= 3">{{
				channelType(item.channel)
			}}</view>
		</view>

		<buyTicket v-if="show" @Shut="Shut"></buyTicket>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				show: false,
				limit: 10,
				page: 1,
				getMore: true,
				accountInfo: '',
				pageData: [],
			};
		},
		onLoad() {
			this.getRevenueLog();
		},
		methods: {
			getRevenueLog() {
				this.$http
					.post({
						url: '/cqzmqmH5Api/getRevenueLog',
						data: {
							limit: this.limit,
							page: this.page,
						},
					})
					.then((res) => {
						if (res.errcode != 100) return this.$Toast(res.msg);
						this.accountInfo = res.accountInfo;
						const result = res.data || [];
						this.page == 1
							? (this.pageData = result)
							: (this.pageData = [...this.pageData, ...result]);
						if (result.length < this.limit) this.getMore = false;
						console.log(result.length, 'result.length');
					});
			},
			channelType(channel) {
				const channelObj = {
					0: '',
					3: '分红基金',
					4: '推荐收益',
					5: '团队分红收益',
					6: '团队分红平级',
					6: '报单收益',
					7: '报单平级',
				};
				return channelObj[channel];
			},
			getClassbg(channel) {
				const channelObj = {
					0: 'bg_990',
					3: 'bg_006',
					4: 'bg_ff6',
					5: 'bg_0066',
					6: 'bg_0066',
					6: 'bg_006',
					7: 'bg_006',
				};
				return channelObj[channel];
			},
			Shut() {
				this.show = false;
				this.getRevenueLog();
			},
		},
		onReachBottom() {
			if (!this.getMore) return;
			this.page++;
			this.getRevenueLog();
		},
	};
</script>

<style>
	page {
		background-color: #f2f2f2;
		padding-bottom: 24rpx;
	}
</style>
<style lang="scss" scoped>
	.Wrapper {
		width: 100%;
		padding: 24rpx 40rpx 30rpx 40rpx;
		background-color: #000066;
		color: #fff;

		.Btn {
			color: #fff;
			font-size: 28rpx;
			padding: 0 20rpx;
			position: relative;
		}
		.btnLine:before {
			content: '';
			width: 1px;
			height: 20rpx;
			background-color: #fff;
			position: absolute;
			right: 0;
			top: 10rpx;
		}
		.foundation {
			display: flex;
			flex-direction: column;
		}
		.infoTxt {
			color: #fff;
			font-size: 26rpx;
			margin-top: 20rpx;
		}
	}
	.list {
		width: 690rpx;
		background-color: #fff;
		margin: 24rpx auto 0;
		padding: 20rpx;
		border-radius: 10rpx;
		position: relative;
		display: flex;
		flex-direction: column;
		.list_txt {
			color: #333;
			font-size: 32rpx;
		}
		.Tips {
			padding: 8rpx 18rpx;
			color: #fff;
			font-size: 24rpx;
			border-radius: 30rpx;
			position: absolute;
			top: 14rpx;
			right: 20rpx;
		}
		.bg_990 {
			background-color: #990000;
		}
		.bg_006 {
			background-color: #0066ff;
		}
		.bg_0066 {
			background-color: #006633;
		}
		.bg_ff6 {
			background-color: #ff6600;
		}
	}
</style>
